<template>
  <div class="ladderPriceNew">
    <!-- 头部搜索 -->
    <header class="">
      <!-- 搜索框和选择类型 -->
      <div class="sreach_area">
        <div class="divtip">
          <van-dropdown-menu>
            <van-dropdown-item
              v-model="cateLabelValue"
              :title="title"
              :options="cateLabelList"
              @change="selectTab"
            />
            <img
              src="https://image.hezongyy.com/pcimage/119h5/xiala.png"
              alt=""
            />
          </van-dropdown-menu>
          <input type="text" v-model="keyWord" placeholder="药品名/厂家名" />
          <div class="div" @click="search(keyWord)">搜索</div>
        </div>
      </div>
      <!-- 点击选择 -->
      <div class="tab_area">
        <div
          :class="from.searchType == 0 ? 'active' : 'item'"
          @click="tabChange(0)"
        >
          全部
        </div>
        <div
          :class="from.searchType == 1 ? 'active' : 'item'"
          @click="tabChange(1)"
        >
          已选购品种
        </div>
        <div
          :class="from.searchType == 2 ? 'active' : 'item'"
          @click="tabChange(2)"
        >
          未选购品种
        </div>
      </div>
    </header>
    <!-- 主题列表 -->
    <main class="mainScrollTop">
      <div class="ladder-component">
        <!-- 列表区域 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多商品信息了"
          @load="findPageTieredPricingGoods"
        >
          <GoodsList
            couponType="coupons"
            @showCards="showCards"
            :dataSoures="ladderGoodsList"
          />
        </van-list>
      </div>
    </main>
    <!-- 弹框区 -->
    <div>
      <!-- //弹窗详情 -->
      <DialogInfo
        :everyDayInfo="everyDayInfo"
        :show="show"
        @close="close"
        type="阶梯价"
      />
    </div>
    <!-- 加载 -->
    <van-overlay :show="activeLoadingShow" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="activeLoading"><img :src="activeLoading" alt="" /></div>
      </div>
    </van-overlay>
    <!-- 返回顶部 -->
    <div class="upgrade" @click="goTop" v-show="goTopShow">
      <img src="https://image.hezongyy.com/pcimage/119h5/goup.png" alt="" />
    </div>
  </div>
</template>

<script>
import { postRequest } from "../../api/index";
import url from "../../axios/apiUrl";
import { GoodsList } from "@/components/Scroller";
import DialogInfo from "../../components/DialogInfo";
import activeLoading from "@/assets/image/activeLoading.gif";

export default {
  components: {
    GoodsList,
    DialogInfo
  },
  props: {},
  data() {
    return {
      activeLoadingShow: false, // 加载
      activeLoading, //加载转圈
      goTopShow: false, // 回到顶部
      cateLabelValue: -1,
      title: "全部分类",
      cateLabelList: [], //下拉列表
      keyWord: "", //每日特价搜索词
      from: {
        pageNumber: 1,
        pageSize: 10,
        keyWord: "", //搜索关键字
        searchType: 0, //搜索类型 0 查询全部  1 已加入购物车  2未选择购物车
        goodsType: null
      },
      ladderGoodsList: [], //商品列表
      everyDayInfo: {}, ///弹窗信息详情
      show: false, //弹窗开关
      bottomPX: null, // 里底部还有多少距离
      endShow: true, // 加载中
      totalRecords: null,
      totalPage: null,
      loading: false,
      finished: false
    };
  },
  watch: {},
  computed: {},
  mounted() {
    //获取分类
    this.cateLabel();
    //阶梯价列表
    // this.findPageTieredPricingGoods();

    // 滚轮
    let node = document.querySelector(".mainScrollTop");
    node.onscroll = () => {
      this.bottomPX = node.scrollHeight - node.scrollTop - node.clientHeight;
      // 显示返回顶部
      if (node.scrollTop == 0) {
        this.goTopShow = false;
      }
      if (node.scrollTop > 600 && this.ladderGoodsList) {
        this.goTopShow = true;
      }
    };
  },
  methods: {
    //下拉选择
    selectTab(value) {
      if (value == -1) {
        this.title = "全部分类";
      } else {
        this.title = this.cateLabelList[value - 1].text;
      }
      this.from.goodsType = value;
    },
    //获取erp分类
    async cateLabel() {
      let res = await postRequest(url.cateLabel, {
        level1: 1,
        level2: 2,
        level3: 3,
        showAll: 1
      });
      if (res.data.code == "000000") {
        let content = [];
        for (let data of res.data.content) {
          let temp = {
            text: data.name,
            value: data.id
          };
          content.push(temp);
        }
        this.cateLabelList = content;
      }
    },
    //商品列表搜索
    async search(value) {
      this.from.keyWord = value;
      this.from.pageNumber = 1;
      this.findPageTieredPricingGoods();
      let node = document.querySelector(".mainScrollTop");
      node.scrollTop = 0;
    },
    //tab筛选
    tabChange(type) {
      this.from.pageNumber = 1;
      if (type == 0) {
        this.from.searchType = 0;
      } else if (type == 1) {
        this.from.searchType = 1;
      } else if (type == 2) {
        this.from.searchType = 2;
      }
      this.findPageTieredPricingGoods();
      //切换回到顶部
      this.goTop();
    },
    //回到顶部
    goTop() {
      let node = document.querySelector(".mainScrollTop");
      if (node) {
        node.scrollTop = 0;
      } else {
        node.scrollTop = 0;
      }
    },
    //加购弹窗
    showCards(item) {
      this.show = true;
      this.everyDayInfo = item;
    },
    //关闭弹窗
    close() {
      this.show = false;
    },

    //商品列表
    async findPageTieredPricingGoods() {
      if (this.from.pageNumber == 1) {
        this.activeLoadingShow = true;
      }
      let res = await postRequest(url.findPageTieredPricingGoods, this.from);
      if (res.data.code == "000000") {
        this.activeLoadingShow = false;
        if (this.from.pageNumber == 1) {
          this.ladderGoodsList = [];
        }
        this.loading = false;
        this.from.pageNumber++;
        this.ladderGoodsList = this.ladderGoodsList.concat(
          res.data.content.list
        );
        if (this.ladderGoodsList.length == res.data.content.totalRecords) {
          this.finished = true;
        } else {
          this.finished = false;
        }
        if (this.ladderGoodsList) {
          this.ladderGoodsList.map(obj => {
            this.$set(obj, "initializeMinimum", 1);
            this.$set(obj, "maximum", obj.maxBuyNumber);
            this.goodsAdd.pageInit(obj, this);
          });
        }
      } else {
        this.finished = true;
        this.activeLoadingShow = false;
        this.$toast(res.data.message);
      }
    }
  }
};
</script>

<style lang="less" src="./index.less" scoped></style>
